<template>
    <t-layout>
    <t-header>
        <div class="detail-header">
        <t-space size="2" direction="vertical">
        
        <t-typography-text strong>产品管理</t-typography-text>
       
        </t-space>
        </div>
    </t-header>
    <t-content>

        <div class="data-content">
            <div class="data-header">
                <t-space size="4px">
                    <t-button  variant="outline" theme="primary" @click="addOpen" size="small">
                    <template #icon><add-icon /></template>
                    新增产品</t-button>
                        
                    <t-input placeholder="产品名称" v-model="input" size="small">
                        <template #suffixIcon>
                            <search-icon :style="{ cursor: 'pointer' }" @click="search"/>
                        </template>
                    </t-input>
                </t-space>
                <div>
                    <t-radio-group size="small"  default-value="1">
                        <t-radio-button value="1"><ViewListIcon /></t-radio-button>
                        <t-radio-button value="2"><TableIcon /></t-radio-button>
                      
                    </t-radio-group>
                </div>
            </div>
            <DataTable :data="data" :columns="columns">

                <template #view="{ row }">
                    <t-space>
                        <t-link theme="primary" hover="color" @click="detail(row)" size="small">
                        查看
                        </t-link>
                        <t-link theme="danger" hover="color" @click="del(row)" size="small">
                            删除
                        </t-link>
                    </t-space>
                    
                </template>
                
            </DataTable>
        </div>
    </t-content>
    <t-footer>
        <Page @data-refresh="getData" ref="pageRef" :total="rows"></Page>
    </t-footer>
    
</t-layout>
<Add ref="addRef"></Add>
</template>
<style scoped>

.data-header{
    margin-bottom: 4px;
    background-color: var(--td-bg-color-container);
    display: flex;
    justify-content: space-between;
}

.detail-header{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
}
</style>
<script setup>
import DataTable from '@/components/table/DataTable.vue';
import { SearchIcon,TableIcon,ViewListIcon } from 'tdesign-icons-vue-next';

import Add from './Add.vue';
import Page from '@/components/table/Page.vue';
import {AddIcon} from 'tdesign-icons-vue-next';
import { ref } from 'vue';
import { useTableData } from '@/hooks/useTableData';
import { useRouter } from 'vue-router';
const input = ref('')
const addRef = ref();
const pageRef = ref();
const router = useRouter();

const {data,rows,params,delParams,loading,fetchData,deleteData} = useTableData("/product/list","/product/delete",{

        name:'',
        page:1,
        pageSize:10,
    })

const columns = ref([
{
    colKey: 'serial-number',width:'50'
  },
  { colKey: 'name', title: '产品名称', width: '100' },
  { colKey: 'desc', title: '产品描述' },
  { colKey: 'access', title: '接入方式' },
  { colKey: 'data', title: '数据协议' },
  { colKey: 'method', title: '传输协议' },
  { colKey: 'create', title: '创建时间' },
  { colKey: 'operation', title: '操作', width: '150', fixed: 'right' },
]);

const getData = () => {
    params.value.name = input.value
    params.value.page = pageRef.value.current
    params.value.pageSize = pageRef.value.pageSize
    fetchData()
}
const addOpen = () => {
    addRef.value.open();
}

const detail = (row) => {
    router.push({name:"product_detail",params:{id:row.id,type:row.data}})
}

const del = (row) => {
    delParams.value.id = row.id
    
    deleteData().then(res=>{
        getData()
    })
    
}

const search = () => {

    getData()
}

</script>